<template>
  <div class="app">
    <el-card style="width: 400px" class="card">
    <template #header>
      <div class="card-header">
        <span>登录</span>
      </div>
    </template>
    <el-form
    ref="ruleFormRef"
    style="max-width: 400px"
    :model="ruleForm"
    :rules="rules"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item  prop="userName">
      <el-input v-model="ruleForm.userName" prefix-icon="User" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item  prop="password">
      <el-input v-model="ruleForm.password" 
      :type="passwordVisible ? 'text' : 'password'"
      prefix-icon="Lock"
      placeholder="请输入密码">
      <template #suffix>
        <el-icon :size="20" @click="togglePasswordVisibility" class="password-toggle-icon">
          <View v-if="passwordVisible" />
          <Hide v-else />
        </el-icon>
      </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        登录
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
    <template #footer>Footer content </template>
    
  </el-card>
  </div>
</template>
  
<script setup>
import { useUserStore } from '@/stores/user';
import { userloginRequest } from '@/api/use'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import { View, Hide } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'

let router = useRouter();

const formSize = ref('default')
const ruleFormRef = ref(null)
const ruleForm = reactive( {
  userName: '',
  password: ''
  
})

const rules = reactive({
  userName: [
    //required非空校验，trigger触发时机
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名必须是3~10位的字符', trigger: 'blur' },
  ],
  password:[{
    pattern:/^.{5,}$/,
    message:'密码至少五位',
    required: true,
  }]
  
})

const userStore = useUserStore()
console.log(userStore.token);

const passwordVisible = ref(false);

const togglePasswordVisibility = () => {
  passwordVisible.value = !passwordVisible.value;
};
const submitForm = async(formEl) => {
  if (!formEl) {
    return
  }
  formEl.validate(async(valid) => {
    if (valid) {
      // console.log('submit!', ruleForm);
      //登录
      const r = await userloginRequest(ruleForm.userName,ruleForm.password)
      console.log(r);
      const userStore = useUserStore()
      userStore.setToken(r.data.data)
      
      if(r.data.code == 1){
        ElMessage({
          message: '登录成功',
          type: 'success',
          plain: true,
        })
        router.push('/home')
    }else{
      ElMessage({
        message: '用户名或密码错误',
        type: 'error',
        plain: true,
      })
    }
    }
    
  })
}
//重置
const resetForm = (formEl) => {
  if (!formEl) {
    return
  }
  formEl.resetFields()
}
</script>

<style>
  .app{
    background-image: url('../assets/bg.jpg');
    height: 100%;
    height: 100vh;
    display: flex;
    .card{
      margin:  auto;
    }
    .password-toggle-icon{
      cursor: pointer;
    }
  }

</style>